<!-- 付款明细控件 -->
<template>
  <a-space direction="vertical" style="width: 100%">
    <div class="add-td" style="text-align: right; margin-right: 50px">
      <a-button type="text" @click="addTd">添加</a-button>
    </div>
    <a-table
      :columns="props.props.columns"
      :data="props.props.data"
      :scroll="scroll"
      :pagination="false"
    >
      <template #stages="{ record }">
        <a-input v-model="record.stages" />
      </template>
      <template #condition="{ record }">
        <a-input v-model="record.condition" />
      </template>
      <template #amount="{ record }">
        <a-input v-model="record.amount" />
      </template>
      <template #rate="{ record }">
        <a-input v-model="record.rate" />
      </template>
      <template #type="{ record }">
        <a-input v-model="record.type" />
      </template>
      <template #method="{ record }">
        <a-input v-model="record.method" />
      </template>
      <template #remark="{ record }">
        <a-input v-model="record.remark" />
      </template>
      <template #optional="{ record }">
        <a-space>
          <a-button type="text" status="danger" @click="del(record.key)"
            >删除</a-button
          >
        </a-space>
      </template>
    </a-table>
  </a-space>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted, computed } from 'vue';
  import uniqueid from 'lodash.uniqueid';

  const emit = defineEmits(['update:values']);
  const props = withDefaults(
    defineProps<{
      props: { [propName: string]: any };
      name?: string;
      required?: boolean;
      values: any;
      regex?: {
        [name: string]: {
          role: any;
          name: any;
        };
      };
    }>(),
    {}
  );

  const scroll = {
    x: 2000,
  };
  const addTd = () => {
    // let key = getProps.data.length + 1;
    let obj = {
      key: uniqueid(''),
      stages: '',
      condition: '',
      amount: '',
      rate: '',
      type: '',
      method: '',
      remark: '',
    };
    props.props.data.push(obj);
  };
  const del = (key: any) => {
    if (props.props.data.length > 1) {
      props.props.data = props.props.data.filter(
        (item: any) => item.key !== key
      );
    }
  };
  onMounted(() => {
    if (props.props.data && props.props.data.length) {
      props.props.data.forEach((element: any) => {
        element.key = element.key ? element.key : uniqueid('');
      });
    }
  });
</script>
